<template>
  <div class="maintenanceOfChargingItems h100">
    <div class="PageContent">
      <el-col :span="4" class="left-tree">
        <el-row style="text-align: center;line-height: 5em;">
          <el-button type="primary" icon="el-icon-circle-plus-outline" v-if="btnRight.btnStorageTreeAdd" plain
                     @click="addType()"></el-button>
          <el-button type="primary" icon="el-icon-edit" v-if="btnRight.btnStorageTreeEdit"
                     @click="modifyType()"></el-button>
          <el-button type="danger" icon="el-icon-delete" v-if="btnRight.btnStorageTreeDelete"
                     @click="removeType()"></el-button>
        </el-row>
        <el-tree :data="treeData" ref="tree"
                 :props="defaultProps"
                 node-key="id"
                 default-expand-all
                 check-strictly
                 :current-node-key='0'
                 :default-checked-keys="selectedNode"
                 :expand-on-click-node="false"
                 highlight-current
                 @check="(click, checked)=>{handleClick(click, checked)}"
                 @node-click="handleClick"
        ></el-tree>
      </el-col>
      <el-col :span="20" class="right-tree">
        <el-row style="text-align: left;line-height: 5em;" class="searchData">
          <el-button type="primary" v-if="btnRight.btnNodeAdd" plain @click="add()">添加</el-button>
          <el-button type="primary" v-if="btnRight.btnNodeEdit" @click="modify()">修改</el-button>
          <el-button type="danger" v-if="btnRight.btnNodeDelete" @click="remove()">删除</el-button>
        </el-row>
        <el-table
          ref="singleTable"
          :data="tableData" :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          border
          stripe
          @row-click="handleRowClick"
          @select="select" @select-all="selectAll"
          height="calc(100% - 125px)"
          style="width: 100%;overflow-y: scroll">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            property="id"
            label="编码"
            align='center'
            width="150">
          </el-table-column>
          <el-table-column
            property="depositCaseNo"
            label="墓穴编号"
            align='center'
            width="150">
          </el-table-column>
          <el-table-column
            property="depositCaseType"
            label="墓穴类型"
            align='center'
            width="150">
          </el-table-column>
          <!--<el-table-column
            property="depositCaseServiceName"
            label="收费类型"
            align='center'
            width="150">
          </el-table-column>
           <el-table-column
             property="depositCasePrice"
             align = 'center'
             label="收费用标准"
             width="100">
           </el-table-column>-->
          <el-table-column
            property="depositCasePrice"
            align='center'
            label="价格"
            width="100">
          </el-table-column>
          <el-table-column
            property="depositCaseStateName"
            align='center'
            label="状态"
            width="100">
          </el-table-column>
          <el-table-column
            property="depositCaseCols"
            align='center'
            label="列号"
            width="">
          </el-table-column>
          <el-table-column
            property="depositCaseRows"
            align='center'
            label="层号"
            width="">
          </el-table-column>
          <el-table-column
            property="depositCaseOrder"
            align='center'
            label="排序">
          </el-table-column>
          <!-- <el-table-column
             property="itemDescribe"
             align = 'center'
             label="备注">
           </el-table-column>-->
        </el-table>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </el-col>
    </div>
    <el-dialog title="园区小区排编辑" :visible.sync="dialogVisibleType" width="700px" v-dialogDrag border @opened='dialogVisibleTypeOpen' @close="dialogVisibleTypeClose">
      <el-form :model="saveTypeData" :rules="rulesType" ref="treeNodeForm" :inline="true" label-width="120px"
               :disabled="saveFlagType">
        <el-row :gutter="5">
          <el-form-item label="节点类型:" prop="typeCode">
            <el-select
              v-model="saveTypeData.typeCode" style="width: 495px;"
              clearable
              @change="typeChange(saveTypeData.typeCode)"
              filterable
              placeholder="节点类型"
              class="w150"
              :disabled='isEdit'
            >
              <el-option
                v-for="item in copydictionary.gw_node_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState"
              />
            </el-select>
          </el-form-item>

        </el-row>
        <el-row :gutter="5">
          <el-form-item label="父节点:" v-show="!floorVisible">根节点</el-form-item>
          <template v-if="floorVisible">
            <el-form-item :prop="floorVisible ? 'floorType':''" :key="0" label="父节点:" >
              <el-select
                v-model="saveTypeData.floorType" style="width: 200px;"
                clearable
                @change="loadRoom(saveTypeData.floorType)"
                filterable
                placeholder="节点类型"
                class="w150"
                :disabled='isEdit'
              >
                <el-option
                  v-for="item in floor"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.disableState"
                />
              </el-select>
            </el-form-item>
          </template>
          <template v-if="roomVisible">
            <el-form-item :prop="roomVisible ? 'roomType':''" >
              <el-select
                v-model="saveTypeData.roomType" style="width: 200px;"
                clearable
                filterable
                placeholder="节点类型"
                class="w150"
                @change="roomChange($event)"
                :disabled='isEdit'
              >
                <el-option
                  v-for="item in room"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="节点名称:" prop="name">
            <el-input type="textarea" v-model="saveTypeData.name" style="width: 495px;"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="排序:" prop="orderId">
            <el-input type="textarea" v-model="saveTypeData.orderId" style="width: 495px;" min="0"
                      @input.native="checkPositive"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" v-if="btnRight.btnStorageTreeSave" @click="saveType('treeNodeForm')" :disabled="saveFlagType">保 存
        </el-button>
        <el-button type="primary" v-if="btnRight.btnStorageTreeClose" plain @click="dialogVisibleType = false">关 闭
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="生成墓穴信息" :visible.sync="dialogVisible" width="1100px" v-dialogDrag border>
      <el-form :model="addNodeFormData" :rules="AddStorageRules" ref="addNodeForm" class="saveform" :inline="true"
               label-width="120px" :disabled="saveFlag">
        <el-row :gutter="5" style="width:495px;">
          <el-form-item><label>园区-小区-排</label></el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="新增列数:" prop="columnNumber">
            <el-input v-model="addNodeFormData.columnNumber" type="number" min="0"
                      @input.native="checkPositive"></el-input>
          </el-form-item>
          <el-form-item label="列起始数:" prop="columnBeginNumber">
            <el-input v-model="addNodeFormData.columnBeginNumber" type="number" min="0"
                      @input.native="checkPositive"></el-input>
          </el-form-item>

        </el-row>
        <el-row :gutter="5">
          <el-form-item label="新增层数:" prop="rowNumber">
            <el-input v-model="addNodeFormData.rowNumber" type="number" min="0"
                      @input.native="checkPositive"></el-input>
          </el-form-item>
          <el-form-item label="层起始数:" prop="rowBeginNumber">
            <el-input v-model="addNodeFormData.rowBeginNumber" type="number" min="0"
                      @input.native="checkPositive"></el-input>
          </el-form-item>

        </el-row>
        <el-row :gutter="5">
          <el-form-item label="层排序方式:" prop="rowOrderType">
            <el-radio-group v-model="addNodeFormData.rowOrderType">
              <el-radio :label="0">自上倒下（正序）</el-radio>
              <el-radio :label="1">自下倒上（倒序）</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="编码规则:" prop="itemNumber">
            <el-select v-model="addNodeFormData.creatNoType" placeholder="请选择">
              <el-option
              :key="item.id"
                v-for="item in codeRule"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="墓穴类型:" prop="depositCaseCode">
            <el-select v-model="addNodeFormData.depositCaseCode" placeholder="请选择">
              <el-option
                v-for="item in copydictionary.gm_grave_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <!-- <el-form-item label="收费类型:" prop="chargeType">

            <el-select v-model="addNodeFormData.chargeType" placeholder="请选择"
                       @change="selectChargeTypeToPrice(addNodeFormData.chargeType)"
            >
              <el-option
              :key="item.id"
                v-for="item in chargeList"
                :label="item.label"
                :value="item.id"/>
            </el-select>
          </el-form-item> -->
          <el-form-item label="墓穴面积:" prop="area">
            <el-input v-model="addNodeFormData.area" type="number" min="0"
                      @input.native="checkPositive"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="价格:" prop="price">
            <el-input onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" v-model="addNodeFormData.price"
                      maxlength="11"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="排序:">
            <el-input type="number" onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
                      v-model="addNodeFormData.orderId" maxlength="11"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="备注:">
            <el-input type="textarea" v-model="addNodeFormData.remark" style="width: 535px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" v-if="btnRight.btnNodeSave" @click="saveAddNode()" :disabled="saveFlag">保 存
        </el-button>
        <el-button type="primary" v-if="btnRight.btnNodeClose" @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="寄存墓穴信息维护" :visible.sync="dialogEditVisible" width="700px" v-dialogDrag border>
      <el-form :model="editNodeFormData" :rules="rulesNode" ref="editNodeForm" class="saveform" :inline="true"
               label-width="120px" :disabled="saveFlag">
        <el-row :gutter="5" style="width:495px;">
          <el-form-item><label>园区-小区-排</label></el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="编码:">
            <el-input v-model="editNodeFormData.id" maxlength="11" disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="墓穴类型:" prop="depositCaseCode">
            <el-select v-model="editNodeFormData.depositCaseCode" placeholder="请选择">
              <el-option
                v-for="item in copydictionary.gm_grave_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
<!--          <el-form-item label="收费类型:" prop="depositCaseServiceid">-->
<!--            <el-select v-model="editNodeFormData.depositCaseServiceid" placeholder="请选择">-->
<!--              <el-option-->
<!--              :key="item.id"-->
<!--                v-for="item in chargeList"-->
<!--                :label="item.label"-->
<!--                :value="item.id"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="价格:" prop="depositCasePrice">
            <el-input type="number" onkeyup="value = value.match(/^\d+(?:.\d{0,2})?/)" readonly="readonly"
                      v-model="editNodeFormData.depositCasePrice" maxlength="11"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="排序:">
            <el-input type="number" v-model="editNodeFormData.depositCaseOrder" maxlength="11"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="备注:">
            <el-input type="textarea" v-model="editNodeFormData.remark" style="width: 535px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" v-if="btnRight.btnNodeSave" @click="saveNode()" :disabled="saveFlag">保 存</el-button>
        <el-button type="primary" v-if="btnRight.btnNodeClose" @click="dialogEditVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as API from '@/api/systemApplication'
  import {toFixed} from "../../utils/tofixed";
  export default {
    name: "storageNodeList",
    data() {
      return {
        isEdit:false,
        rules: {
          itemCode: [{required: true, message: '请输入项目编码', trigger: 'blur'}],
          itemName: [{required: true, message: '请输入项目名称', trigger: 'blur'}],
          itemPrice: [{required: true, message: '请输入项目价格', trigger: 'blur'}],
          itemNumber: [{required: true, message: '请输入项目数量', trigger: 'blur'}],
        },
        rulesType: {
          type: [{required: true, message: '请输入分类编码', trigger: 'blur'}],
          typeCode: [{required: true, message: '请选择节点类型', trigger: 'change'}],
          floorType: [{required: true, message: '请选择节点类型', trigger: 'change'}],
          roomType: [{required: true, message: '请选择节点类型', trigger: 'change'}],
          typeName: [{required: true, message: '请输入分类名称', trigger: 'blur'}],
          name: [{required: true, message: '请输入节点名称', trigger: 'blur'}],
          orderId: [{required: true, message: '请输入排序', trigger: 'change'}],
        },
        rulesNode: {
          depositCasePrice: [{required: true, message: '请输入价格', trigger: 'blur'}],
        },
        AddStorageRules: {
          columnNumber: [{required: true, message: '请输入新增列数', trigger: 'blur'}],
          columnBeginNumber: [{required: true, message: '请输入列起始数', trigger: 'blur'}],
          rowBeginNumber: [{required: true, message: '请输入层起始数', trigger: 'blur'}],
          rowNumber: [{required: true, message: '请输入新增层数', trigger: 'blur'}],
          price: [{required: true, message: '请输入价格', trigger: 'blur'}],
          rowOrderType: [{required: true, message: '请选择层排序方式', trigger: 'change'}],
          depositCaseCode: [{required: true, message: '请选择墓穴类型', trigger: 'change'}],
          chargeType: [{required: true, message: '请选择收费类型', trigger: 'change'}],
          area:[{required: true, message: '请输入面积', trigger: 'blur'}],

        },
        treeData: [{
          id: 0,
          label: '墓穴管理',
          parentId:-1,
          children: []
        }],
        treeInfoLoad: [],//加载的树形数据
        search: "",
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        chargeList: [

        ],//收费类型
        tableData: [],
        floor: [],//寄存楼
        room: [],//寄存室
        currentRow: null,
        tableSelection: [],
        selectOrg: {
          orgsid: []
        },
        onpresscTime: 0,  //  阻止短时间内连续点击
        saveFlagType: false, //保存标志
        saveFlag: false, //保存标志
        dialogVisibleType: false,  //项目类型分类维护对话框
        dialogVisible: false,//项目分类维护对话框
        dialogEditVisible: false,//项目分类维护对话框
        floorVisible: false,//楼节点是否显示
        roomVisible: false,//室节点是否显示
        saveTypeData: {       //保存服务物品类型基本信息
          "id": 0,
          "pId": "",
          "parentId": "",
          "floorType": "",//楼类型
          "floorItem": "",//楼全数据
          "roomType": 0,//室类型
          "roomItem": "",//室类型
          "type": "",//类型
          "typeCode": 0,
          "name": "",
          "typeDescribe": "",
          "orderId": "",
          "version": 0,
          "positionName": '',
        },
        selectedNode: [],//选中节点默认数组
        selectedData: {},//选中节点
        dictionary: {},//字典值
        copydictionary: [],//字典值
        //墓穴生成表单
        addNodeFormData: {  //保存寄存新增表单数据
          "depositCaseTreeid": 0,//寄存架id
          "columnNumber": "",//列增加数
          "columnBeginNumber": "",//列起始数
          "columnDelNumber": "",//列排除数
          "rowNumber": "",//层数
          "rowBeginNumber": "",//层起始数
          "rowDelNumber": "",//层排除数
          "rowOrderType": 0,//排序类型
          "chargeType": 0,//收费类型
          "depositCaseCode": 0,//墓穴类型
          "orderId": 0,//排序
          "price": 0,//价格
          "remark": 0,//备注
          "creatNoType": 0,//编码生成规则
          "positionName": 0,//节点全名称

        }, //墓穴编辑表单
        editNodeFormData: {
          "id": 0,//id
          "caseTreeId": "",//树节点
          "depositCaseNo": "",//墓穴编码
          "depositCaseCode": "",//墓穴类型编码
          "depositCaseType": "",//墓穴类型类型
          "depositCaseState": "",//墓穴状态
          "depositCasePrice": "",//价格
          "depositCaseOrder": 0,//排序
          "depositCaseCols": "",//列号
          "depositCaseRows": "",//行号
          "depositCaseServiceid": "",//物品id
          "positionName": "",//节点全名称
          "version": 0,//版本
        },
        disableState: [
          {label: '有效', value: 0},
          {label: '无效', value: 1}
        ],
        //编码规则
        codeRule: [
          {label: '无', value: 0}
        ],
        pager: {
          "pageSize": 20,
          "total": 1,
          "currentPage": 1
        },
        dialogVisibleList: false,
        //按钮权限
        btnRight: {
          btnStorageTreeAdd: true,//  目录新增
          btnStorageTreeEdit: true,// 目录编辑
          btnStorageTreeDelete: true,// 目录删除
          btnNodeAdd: true,//墓穴新增
          btnNodeEdit: true,//墓穴编辑
          btnNodeDelete: true,//墓穴删除
          btnStorageTreeSave: true,//保存
          btnStorageTreeClose: true,//关闭
          btnNodeSave: true,//保存
          btnNodeClose: true,//关闭
        },
        clickLevel: 0, //选中树的等级
        clickPositionName: '', //选中树的节点全名称
      }
    },
    mounted() {
      this.loadTreeData();
      //设置tree第一层为选中状态
      this.$refs.tree.setCheckedKeys([0],true)
      //加载楼信息
      this.loadFloor();
      //加载字典寄存目录类型
      this.loadDictionaryData();
      //加载费用列表
      //this.loadChargeByTypeCode();
      //console.log(this.$refs.tree.setCheckedKeys([0],true),"当前选中的节点 ")
      //载入按钮
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (let key of Object.keys(this.btnRight)) {
        this.btnRight[key] = this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] == "true") ? true : false;
      }
    },
    computed: {
      // 模糊搜索
      tables() {
        const search = this.search
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          return this.listNoPackage.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            {
              return Object.keys(data).some(key => {
                if (key == "itemName" || key == "itemPrice") {
                  return String(data[key]).indexOf(search) > -1
                }
              })
            }

          })
        }
        return this.listNoPackage
      }
    },
    methods: {
      // roomChange(val){
      //   //console.log("room改变",val)
      // },
      dialogVisibleTypeOpen(){
        if(this.isEdit){

        }else{
          this.$refs.treeNodeForm.resetFields();
          this.saveTypeData={       //保存服务物品类型基本信息
            "id": '',
            "pId": "",
            "parentId": "",
            "floorType": "",//楼类型
            "floorItem": "",//楼全数据
            "roomType": '',//室类型
            "roomItem": "",//室类型
            "type": "",//类型
            "typeCode": '',
            "name": "",
            "typeDescribe": "",
            "orderId": 0,
            "version": '',
            "positionName": '',
          }
        }
      },
      //弹框关闭清除校验
      dialogVisibleTypeClose(){
        this.saveTypeData={       //保存服务物品类型基本信息
          "id": '',
          "pId": "",
          "parentId": "",
          "floorType": "",//楼类型
          "floorItem": "",//楼全数据
          "roomType": '',//室类型
          "roomItem": "",//室类型
          "type": "",//类型
          "typeCode": '',
          "name": "",
          "typeDescribe": "",
          "orderId": 0,
          "version": '',
          "positionName": '',
        }
        this.isEdit=false
        this.floorVisible= false//楼节点是否显示
        this.roomVisible=false//室节点是否显示
      },
      goodsHandleRowClick(row, column, event) {
        this.$refs.goodsMultipleTable.toggleRowSelection(row);
        let data = this.$refs.goodsMultipleTable.selection
        this.multipleSelection = data
      },
      selectChargeTypeToPrice(v) {
        ////console.log("值",v)
        let data = this.chargeList
        if (data && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            if (v == data[i].id) {
              //更新价格
              this.addNodeFormData.price = data[i].itemPrice;
              this.addNodeFormData.depositCaseServiceid = data[i].id;
              break;
            }
          }
        }
      },
      //tree中类型添加
      addType() {
        //console.log(this.$refs.tree.getCheckedNodes(),"选择的借点")
        let selectNodes= this.$refs.tree.getCheckedNodes()
        if(selectNodes.length>0){
          this.dialogVisibleType = true
        }else{
          this.$message("请选择墓穴节点！")
        }
        this.saveTypeData = {
          "id": 0,
          "parentId": 0,
          "typeCode": "",
          "typeName": "",
          "name": "",
          "sort": "",
          "remark": "",
          "version": 0,
          "positionName": '',
        }

      },//寄存类型变化，触发楼与室是否显示
      typeChange(v) {
        //设置类型
        this.setType(v);
        if (v == 1) {
          this.floorVisible = false;
          this.roomVisible = false;
        } else if (v == 2) {
          this.floorVisible = true;
          this.roomVisible = false;
        } else {
          this.floorVisible = true;
          this.roomVisible = true;
        }
      },//设置根据typecode设置type
      setType(v) {
        let data = this.copydictionary.storage_node_type;
        if (data && data.length) {
          for (let i = 0; i < data.length; i++) {
            if (v == data[i].dataCode) {
              this.saveTypeData.type = data[i].dataText;
              break;
            }
          }
        }
      },//通过id获得点对象
      getNodeById(id) {
        //console.log("hj",id,this.treeInfoLoad)
        let data = this.treeInfoLoad;
        if (data && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            if (data[i].id == id) {
              return data[i];
              break;
            }
          }
        }
        return null;
      }
      ,//tree中类型修改
      modifyType() {
        this.isEdit=true
        this.loadTypeNode();
      },
      //tree中节点删除
      removeType() {
        let data = this.selectedData;
        if (data.id == 0 || data.label == "服务物品分类") {
          this.$message("未选中寄存节点")
          return
        }
        this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData = {
            "id": data.id,
            "version": this.getVersionById(data.id)
          }
          API['deleteDepositGraveTreeWithId'](postData).then(response => {
            const {message} = response;
            this.$message(message)
            this.loadTreeData()
          }).catch(error => {
            this.$message(error)
          })
        }).catch(() => {
          //几点取消的提示
        });
      },
      getVersionById(id) {
        let data = this.treeInfoLoad;
        if (data && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            if (id == data[i].id) {
              return data[i].version;
              break;
            }
          }
        }
        return 0;
      },
      loadTypeNode() {
        // let data1=this.$ref.tree.getCheckedNodes();
        let data = this.selectedData;
        let this_load = this;
        let postData = {
          "id": data.id
        }
        API['loadDepositGraveTreeWithId'](postData).then(response => {
          //console.log("嘎嘎嘎",response)
          let {data} = response;
          let v = data.typeCode;
          this_load.saveTypeData = data;
          this_load.loadFloor();
          //显示表单数据
          this_load.dialogVisibleType = true
          if (v == 1) {
            this_load.floorVisible = false;
            this_load.roomVisible = false;

          } else if (v == 2) {
            this_load.floorVisible = true;
            this_load.roomVisible = false;
            this_load.saveTypeData.floorType = data.parentId;
          } else {
            this_load.floorVisible = true;
            this_load.roomVisible = true;
            let node = this_load.getNodeById(data.parentId);
            //加载室
            this_load.loadRoom(node.parentId);
            this_load.saveTypeData.floorType = node == null ? 0 : node.parentId;
            this_load.saveTypeData.roomType = data.parentId;
          }
          this_load.saveTypeData.typeCode = data.typeCode;
        }).catch(error => {
          this.$message(error)
        })

      },
      loadChargeByTypeCode() {
        let postData = {
          "serviceType": "storage_charge",
          "keyword": ""
        }
        API['loadServiceItemListWithServiceType'](postData).then(response => {
          let {data} = response;
          this.chargeList = data.list;
          //console.log('价格',response)
        }).catch(error => {
          this.$message(error)
        })
      },
      //table中类型添加
      add() {
        if (this.clickLevel === 4) {
          // let dataArr = this.$refs.tree.getCheckedNodes();
          let data = this.selectedData;
          if (data && data.id) {
            this.addNodeFormData = {  //保存寄存新增表单数据
              "depositCaseTreeid": data.id,//寄存架id
              "columnNumber": "",//列增加数
              "columnBeginNumber": "",//列起始数
              "columnDelNumber": "",//列排除数
              "rowNumber": "",//层数
              "rowBeginNumber": "",//层起始数
              "rowDelNumber": "",//层排除数
              "rowOrderType": 0,//排序类型
              "chargeType": "",//收费类型
              "orderId": 0,//排序
              "price": 0,//价格
              "remark": 0,//备注
              "creatNoType": 0,//编码生成规则
              "positionName": this.addNodeFormData.positionName,//节点全名称
            }
            this.dialogVisible = true
          } else {
            this.$message("请选择项目")
            return
          }
        } else {
          this.$message("只有排才能加地墓穴");
        }


      },//保存架生成表单
      saveAddNode() {
        //表单验证
        let save_node = this;
        this.$refs["addNodeForm"].validate((valid) => {
          if (valid) {
            //提交数据
            let postData = save_node.addNodeFormData;

            postData.id = 0;
            //更新墓穴信息
            API['saveDepositGrave'](postData).then(response => {
              if (response) {
                let data = response;
                if (!data) {
                  save_node.$message('数据保存失败');
                  return
                }
                if (data.code == 1) {
                  save_node.$message('保存成功！');
                  save_node.dialogVisible = false;
                  let data = this.$refs.tree.getCheckedNodes()
                  //更新数据
                  this.loadStorageDataByNodeId(data[0].id)
                  save_node.clearForm();
                }
              } else {
                save_node.$message('数据保存失败');
              }
            }).catch(error => {
              // this.$message(error)
            });
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
      },
      //保存寄存墓穴信息
      saveNode() {
        //表单验证
        let save_node = this;
        this.$refs["editNodeForm"].validate((valid) => {
          if (valid) {
            //提交数据
            let postData = save_node.editNodeFormData;
            if (postData.depositCaseCode == 1) {
              postData.depositCaseType = '单墓穴';
            } else {
              postData.depositCaseType = '双墓穴';
            }
            //更新墓穴信息
            API['updateDepositGrave'](postData).then(response => {
              if (response) {
                //console.log(response,'hjgjgjhgj')
                let data = response;
                if (!data) {
                  save_node.$message('数据保存失败');
                  return
                }
                if (data.code == 1) {
                  save_node.$message('保存成功！');
                  save_node.dialogEditVisible = false;
                  let data = this.$refs.tree.getCheckedNodes()
                  //更新数据
                  this.loadStorageDataByNodeId(data[0].id)
                  save_node.clearForm();
                }
              } else {
                save_node.$message('数据保存失败');
              }
            }).catch(error => {
              // this.$message(error)
            });
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
      },
      //table中类型修改
      modify() {

        let data = this.$refs.singleTable.selection
        if (data.length == 0) {
          this.$message("未选中墓穴")
          return
        } else if(data.length>1) {
          this.$message("只能选择一个墓穴修改")
        }else{
          this.loadStorageNodeById(data[0].id)
        }
      },
      //删除寄存墓穴
      remove() {
        let data = this.$refs.singleTable.selection
        let needDelData=null
        needDelData=this.$refs.singleTable.selection.find((item,index)=>{
          return item.hasPerson===1; //返回true,说明就找到了；
        })
        //console.log(data,'删除的')
        if (data.length == 0) {
          this.$message("未选中墓穴")
          return
        }
         //存在逝者的格位不可删除
        if(needDelData){
          this.$message("存在逝者的格位不可删除")
          return
        }else{
           this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData = [];
          data.forEach(item => {
            let obj = {
              id: item.id,
              version: item.version
            };
            postData.push(obj);
          });
          API['deleteDepositGraveNodeWithId'](postData).then(response => {
            const {message} = response;
            this.$message({
              message,
              type:'success'
            })
            let data = this.$refs.tree.getCheckedNodes()
            //更新数据
            this.loadStorageDataByNodeId(data[0].id)
          }).catch(error => {
            this.$message.error(error)
          })
        }).catch(() => {
          //几点取消的提示
        });
        }

        ////console.log(ids,'ids')

      },
      //加载不是包的信息
      addPackage() {
        API['loadGoodsServiceListNoPackage']().then(response => {
          let {data} = response
          if (data.length > 0) {
            this.listNoPackage = data
            this.dialogVisibleList = true
          }

        }).catch(error => {
          this.$message(error)
        })
      },
      //删除选中的不是包的物品服务
      deletePackageItems(index) {
        if (this.saveData.servicePackageItems && this.saveData.servicePackageItems.length && this.saveData.servicePackageItems[index]) {
          this.saveData.servicePackageItems.splice(index, 1)
          this.$forceUpdate()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      /*追加服务物品包保存按钮*/
      showSelectName() {
        if (this.multipleSelection.length == 0) {
          this.$message("未选中项目")
          return
        }
        let id = []
        //判断原来添加的列表中是否存在要添加的
        if (this.saveData.servicePackageItems && this.saveData.servicePackageItems.length > 0) {
          this.saveData.servicePackageItems.forEach(n => {
            this.multipleSelection.forEach((item, index) => {
              //如果存在相同的id
              if (n.serviceItemId == item.id) {
                //源列表中数量加1
                //设置数量保存两位小数
                n.itemNumber = Number(n.itemNumber).toFixed(2);
                // n.itemNumber=n.itemNumber.match(/^\d*(\.?\d{0,2})/g)[0]||null;
                n.itemNumber = Number(n.itemNumber) + Number(item.itemNumber)
                //记录重复的id
                id.push(item.id)
              }
            })
          })
        }
        /*删除重复的数据*/
        if (id.length) {
          id.forEach((i) => {
            if (this.multipleSelection.length) {
              this.multipleSelection.forEach((m, n) => {
                if (m.id == i)
                  this.multipleSelection.splice(n, 1)
              })
            }
          })
        }
        if (this.multipleSelection.length) {
          this.multipleSelection.forEach(item => {
            this.saveData.servicePackageItems.push({
              serviceItemId: item.id,
              itemName: item.itemName,
              itemPrice: Number(item.itemPrice.match(/^\d+(?:.\d{0,2})?/)),
              itemNumber: Number(item.itemNumber.match(/^\d+(?:.\d{0,2})?/)),
              version: item.version
            })
          })
        }
        this.dialogVisibleList = false
        this.search = ""
        this.multipleSelection = []
      },
      //寄存楼，室，架 类型保存
      saveType() {
        //表单验证
        let this_type = this;
        let floorItem = {};
        this.floor.forEach(item => {
          if (item.id == this.saveTypeData.floorType) {
            floorItem = item;
          }
        })
        let roomItem = {};
        this.room.forEach(item => {
          if (item.id == this.saveTypeData.roomType) {
            roomItem = item;
          }
        })
        if (this.saveTypeData.typeCode == 1) {
          this.saveTypeData.parentId = 0;
          this.saveTypeData.positionName = this.saveTypeData.name;
        } else if (this.saveTypeData.typeCode == 2) { //选择室的时候
          this.saveTypeData.parentId = this.saveTypeData.floorType;
          this.saveTypeData.positionName = floorItem.positionName + '-' + this.saveTypeData.name;
        } else {
          this.saveTypeData.parentId = this.saveTypeData.roomType;
          this.saveTypeData.positionName = roomItem.positionName + '-' + this.saveTypeData.name;
        }
        this_type.$refs["treeNodeForm"].validate((valid) => {
          //console.log(valid)
          //console.log(this.$refs["treeNodeForm"].rules)
          // return
          if (valid) {
            this_type.saveFlagType = true
            let postData = this_type.saveTypeData
            //console.log("保存",postData)
            API['saveDepositGraveTree'](postData).then(response => {
              let {message} = response;
              this_type.$message(message)
              this_type.dialogVisibleType = false
              this_type.loadTreeData()
              this_type.loadFloor()
              this_type.saveFlagType = false
            }).catch(error => {
              this_type.$message(error)
              this_type.saveFlagType = false
            })
            this_type.saveFlagType = false
          }
        });
      },
      //判断是否是节点
      checkIsNode(node, data) {
        let flag = false;
        if (data && data.length && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            if (node.id == data[i].parentId) {
              flag = true;
              return flag;
            }
          }
        }
        return flag;
      },//递归获得树的子集
      getChildren(node, data) {
        //console.log("node",node,data)
        let this_get = this;
        let child = new Array();
        if (this_get.checkIsNode(node, data)) {
          if (data && data.length) {
            data.forEach(item => {
              if (node.id == item.parentId && item.name) {
                let nodeItem = {
                  id: item.id,
                  label: item.name,
                  positionName: item.positionName,
                  parentId:item.parentId
                };
                if (this_get.checkIsNode(nodeItem, data)) {
                  if (!nodeItem.children) {
                    nodeItem.children = new Array();
                  }
                  nodeItem.children.push(this_get.getChildren(nodeItem, data));
                }
                child.push(nodeItem);
              }
            });
            node.children = child;
            return node;
          }
        } else {
          return node;
        }
      },
      //加载物品，服务类型基本信息
      loadTreeData() {
        let postData = {}
        let this_load = this;
        //加载寄存树信息
        API['loadDepositGraveTreeList'](postData).then(response => {
          //console.log("返回",response.data)
          let {data} = response;
          if (!data) {
            this_load.$message('数据读取失败')
            return
          }
          let node = {
            id: 0,
            label: '墓穴管理',
            children: []
          };
          this_load.treeInfoLoad = data;
          //console.log("咋回事",this_load.treeInfoLoad)
          node = this_load.getChildren(node, this.treeInfoLoad);
          let treeArray = new Array();
          treeArray.push(node);
          this.treeData = treeArray;
          this_load.loadFloor(this_load.treeInfoLoad);
        }).catch(error => {
          this.$message(error)
        })
      },
      loadDictionaryData() {
        //没有数据，加载数据
        this.$store.dispatch("user/getdictionary")
          .then((res) => {
            //获取字典数据
            this.dictionary = res;
            this.copydictionary = JSON.parse(JSON.stringify(this.dictionary));
            this.$set(this.dictionary, res);
          })
          .catch(() => console.log("promise catch err"));
      },
      /*分页*/
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pagesize = size;
        alert(pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function (currentPage) {
        this.pager.currentPage = currentPage;
        var data = this.$refs.tree.getCheckedNodes()
        if (data && data.length) {
          this.loadStorageDataByNodeId(data[0].id) //点击第几页
        }
      },
      GoodsSearch() {
        let data = this.$refs.tree.getCheckedNodes()
        if (data && data.length) {
          this.loadStorageDataByNodeId(data[0].id) //点击第几页
        }
      },
      //加载寄存架下墓穴信息
      loadStorageDataByNodeId(id) {
        let postData = {
          "casetreeId": id
        }
        API['loadDepositGraveWithIdGraveTreeId'](postData).then(response => {
          const {data} = response;
          this.tableData = data;
          // this.tableData = data.list;
          // this.pager = data.pager
        }).catch(error => {
          this.$message(error)
        })
      },
      loadStorageNodeById(id) {
        let postData = {
          "id": id,
          "typeCode": 0
        }
        API['loadDepositGraveWithId'](postData).then(response => {
          const {data} = response;
          //加载寄存墓穴信息到表单
          this.editNodeFormData = data;
          this.dialogEditVisible = true
        }).catch(error => {
          this.$message(error)
        })

      },//加载寄存楼数据
      loadFloor() {
        let postData = {
          "parentId": 0,
          "type": 1
        }
        API['loadDepositGraveTreeTypeParentId'](postData).then(response => {
          //console.log('lou',response)
          let {data} = response;
          this.floor = data;
          //console.log('floor===>>>', data)
        }).catch(error => {
          this.$message(error)
        })
      },
      //加载寄存室数据
      loadRoom(v) {
        let postData = {
          "parentId": v,
          "type": 2
        }
        this.positionName = 'positionName';
        let load_this = this;
        API['loadDepositGraveTreeTypeParentId'](postData).then(response => {
          //console.log("shi",response)
          let {data} = response;
          load_this.room = data;
          //console.log(load_this.room);
        }).catch(error => {
          load_this.$message(error)
        })
      },
      //架选择时赋值id（）
      roomChange(item) {
        ////console.log(item)
        this.$forceUpdate();
        this.saveTypeData.roomType = item;
      },
      //tree单选
      handleClick(data, checked, node) {
        //console.log(node,data.positionName,"444");
        //根据level判断能否添加
        this.clickLevel = node.node.level;
        this.addNodeFormData.positionName = data.positionName;   //赋值给提交的数据
        //console.log(this.addNodeFormData.positionName)


        //点树节点不触发加载事件
        this.$refs.tree.setCheckedNodes([data])
        //console.log(this.$refs.tree.setCheckedNodes([data]), 888)
        this.selectedData = data;
        if (node.node.isLeaf) {
          if (checked && data.label != "寄存管理" && data.id != 0) {
            // //console.log(this.$refs.tree.getCheckedNodes())
            this.loadStorageDataByNodeId(data.id)
          }
        } else {
          // this.$message("只有寄存架才能加地墓穴");
        }
      },
      //点击行触发，选中或不选中复选框
      handleRowClick(row, column, event) {
        // if (this.tableSelection.length > 0) {
        //   this.$refs.singleTable.toggleRowSelection(this.tableSelection[0], false);
        // }
        // this.$refs.singleTable.toggleRowSelection(row);
        this.tableSelection = [row]
      },
      select(selection, row) {
        // 选择项大于1时
        // if (selection.length > 1) {
        //   let del_row = selection.shift();
        //   // //console.log('把数组的第一个元素从其中删除后', selection);
        //   this.$refs.singleTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        // }
        this.tableSelection = selection
      },

      selectAll(selection) {
        // if (selection.length >1) {
        //   selection.length = 1;
        // }
        this.tableSelection = selection
      },
      //服务物品保存
      save() {
        if ((Date.now() - this.onpresscTime) > 2000) {
          this.onpresscTime = Date.now()
          //console.log(Date.now())
        } else {
          return
        }
        this.$refs.chargingdialog.validate(valid => {
          if (valid) {
            this.saveFlag = true
            let postData = {
              goodsService: this.saveNodeFormData.goodsService,
              goodsServicePackage: this.saveData.servicePackageItems
            }
            //console.log(postData)
            API['saveGoodsService'](postData).then(response => {
              const {message} = response;
              this.$message(message)
              let data = this.$refs.tree.getCheckedNodes()
              this.loadStorageDataByNodeId(data[0].id)
              this.dialogVisible = false
              this.saveFlag = false
            }).catch(error => {
              this.$message(error)
              this.saveFlag = false
            })
          }
        })

      },//限制两位小数
      proving() {
        // this.saveData.goodsService.itemPrice 是input的值　　
        // 先把非数字的都替换掉，除了数字和.
        let obj = this.saveData.goodsService.itemPrice
        this.saveData.goodsService.itemPrice = this.checkNum(obj, 2);
      }, // 检测数量
      checkCount() {
        // 先把非数字的都替换掉，除了数字和.
        let obj = this.saveData.goodsService.itemNumber
        this.saveData.goodsService.itemNumber = this.checkNum(obj, 2);
      },
      checkNum(obj, n) {
        // 先把非数字的都替换掉，除了数字和.
        obj = obj.replace(/[^\d.]/g, '');
        // 必须保证第一个为数字而不是.
        obj = obj.replace(/^\./g, '');
        // 保证只有出现一个.而没有多个.
        obj = obj.replace(/\.{2,}/g, '');
        // 保证.只出现一次，而不能出现两次以上
        obj = obj.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
        let index = -1
        for (let i in obj) {
          if (obj[i] === '.') {
            index = i
          }
          if (index !== -1) {
            //保留两位小数
            if (i - index > n) {
              obj = obj.substring(0, obj.length - 1)
            }
          }
        }
        //返回验证后的结果
        return obj;
      },
      //验证整数
      onlyNumber() {
        // 先把非数字的都替换掉，除了数字和.
        let obj = this.saveData.goodsService.sort;
        obj = Number.parseInt(obj);
        this.saveData.goodsService.sort = obj;
      },
      //输入必须为正数
      checkPositive(e) {
        // 验证是否是纯数字
        let isNumber = /^\d*$/.test(e.target.value);
        // 过滤非数字
        e.target.value = e.target.value.replace(/\D/g, "");
      }
    },
    watch: {
      /*   "dialogVisible"() {
           if (this.dialogVisible == false) {
             this.$nextTick(() => {
               this.$refs.chargingdialog.resetFields();
             })
           }
         },
         "dialogVisibleType"() {
           if (this.dialogVisibleType == false) {
             this.$nextTick(() => {
               this.$refs.treeNodeForm.resetFields();
             })
           }
         },
         "dialogVisibleList"() {
           if (this.dialogVisibleList == false) {
           }
         }*/
      "dialogVisible"() {
        if (this.dialogVisible === false) { //关闭弹层清除掉提示信息
          this.$refs["addNodeForm"].resetFields();
        }
      }
    }
  }
</script>
<style>
  .search {
    height: 500px;
    overflow-y: scroll;
  }

  .maintenanceOfChargingItems .searchData .el-input {
    margin: 0 10px 0 50px;
  }

  .maintenanceOfChargingItems .searchData .el-input__inner {
    vertical-align: middle !important;
  }
</style>
<style scoped>

  .list {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0px;
    justify-content: space-between;
    padding-left: 120px;
    text-align: left;
    max-height: 120px;
    overflow-y: scroll;
  }

  .list .item {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    /*width: 150px;*/
    height: 30px;
    background-color:#F6F9FF;
    padding: 0 5px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
    text-align: center;
  }

  .list .title {
    margin-right: 10px;
    float: left;
  }

  .list .delete {
    line-height: 30px;
    margin-left: 10px;
    color: red;
    float: right;
    cursor: pointer;
  }

  .wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0px;
    justify-content: space-between;
    height: 500px;
    overflow-y: auto;
  }

  .box-card {
    flex: 0 0 150px;
    display: inline-block;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);;
    margin-bottom: 30px;
    margin-right: 10px;
  }

  .box-card .item {
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    width: 100%;
    height: 90px;
    text-align: center;
    padding: 0 1em;
    border-radius: 5px;
    overflow: hidden;
  }

  .item:hover {
    cursor: pointer;
  }

  .item:last-child {
    margin-bottom: 0px;
  }

  .item.select {
    background-color: lightgreen;
  }

  .item h2 {
    height: 30px;
    overflow: hidden;
  }
.right-tree{
  padding-left: 1em;
  padding-bottom: 30px;
  overflow: hidden;
  height: 100%;
}
.el-tree{
  min-height: 772px;
}
</style>
